<!--  -->
<template>
  <div>
    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">
          <search :value="queryInfo.queryString" @search="querySearch" />
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addShow">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表 -->
      <el-table :data="tableList" border stripe>
        <el-table-column type="index" label="序号" width="100px" />
        <el-table-column label="分类名称" prop="title" />
        <el-table-column label="分类图标" prop="icon" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editDialog(scope.row)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteById(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNumber"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />

      <!-- 对话框 -->
      <el-dialog
        :title="title"
        v-loading="loading"
        :visible.sync="open"
        width="50%"
        @colse="dialogClosed"
      >
        <el-form
          :model="dataForm"
          :rules="rulesDataForm"
          ref="dataForm"
          label-width="100px"
        >
          <el-form-item label="菜品名称" prop="title">
            <el-input v-model="dataForm.title" />
          </el-form-item>
          <el-form-item label="菜品图标" prop="icon">
            <el-input v-model="dataForm.icon" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="clickCancel">取 消</el-button>
          <el-button type="primary" @click="clickOk">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["active"],
  data() {
    //这里存放数据
    return {
      queryInfo: {
        queryString: "",
        pageNumber: 1,
        pageSize: 5,
      },
      //表格数据库
      tableList: [],
      //总记录数
      total: 0,
      //对话框状态
      open: false,
      //对话框标题
      title: "",
      //表单
      dataForm: {},
      //表格加载
      loading: false,
      rulesDataForm: {
        title: [
          { required: true, message: "请输入菜品分类名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        icon: [
          {
            required: true,
            message: "请输入菜品分类图标，用于小程序端展示",
            trigger: "blur",
          },
        ],
      },
    };
  },

  //监听属性 类似于data概念
  computed: {},

  //监控data中的数据变化
  watch: {
    active: {
      handler(val, old) {
        if (val === 0) {
          this.findPage();
        }
      },
      //初始化侦测
      immediate: true,
    },
  },

  //方法集合
  methods: {
    findPage() {
      this.$ajax.post("/food/type/findPage", this.queryInfo).then((res) => {
        this.tableList = res.rows;
        this.total = res.total;
      });
    },
    querySearch(value) {
      this.queryInfo.queryString = value;
      this.findPage();
    },
    handleSizeChange(newPageSize) {
      this.queryInfo.pageSize = newPageSize;
      this.findPage();
    },
    handleCurrentChange(newPageNumber) {
      this.queryInfo.pageNumber = newPageNumber;
      this.findPage();
    },
    addShow() {
      this.dataForm = {};
      this.open = true;
    },
    editDialog(row) {
      this.dataForm = row;
      this.open = true;
    },
    deleteById(row) {
      if (row.foods.length > 0)
        return this.$message.warning("请先删除该分类下的食物后操作！");
      this.$confirm("此操作将永久删除该食物分类信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //delete请求遵循restful风格
          this.$ajax.delete(`/food/type/delete/${row.id}`).then((res) => {
            this.$message.success(res.message);
            this.findPage();
          });
        })
        .catch(() => {
          // 成功删除为confirm 取消为 cancel
          return this.$message.info("操作已取消");
        });
    },
    dialogClosed() {
      //清空表单
      this.$refs.dataForm.resetFields();
    },
    clickCancel() {
      this.dialogClosed();
      this.open = false;
    },
    clickOk() {
      //表单校验
      this.$refs.dataForm.validate((valid) => {
        if (!valid)
          return this.$message.error("表单校验不通过，请认真填写后提交！");
        this.loading = true;
        //判断是修改还是添加
        if (this.dataForm.id === null || this.dataForm.id === undefined) {
          //添加
          this.$ajax.post("/food/type/insert", this.dataForm).then((res) => {
            if (!res.flag) {
              setTimeout(() => {
                this.loading = false;
              }, 6000);
              return this.$message.error(res.message);
            }
            this.open = false;
            this.loading = false;
            this.$message.success(res.message);
            this.findPage();
          });
        } else {
          //修改
          this.$ajax.post("/food/type/update", this.dataForm).then((res) => {
            if (!res.flag) {
              setTimeout(() => {
                this.loading = false;
              }, 6000);
              return this.$message.error(res.message);
            }
            this.open = false;
            this.loading = false;
            this.$message.success(res.message);
            this.findPage();
          });
        }
      });
    },
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
<style scoped></style>
